<!--
 * @Author: your name
 * @Date: 2021-11-12 10:20:30
 * @LastEditTime: 2021-12-08 16:19:59
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \mutong-jimu-h5\src\views\HomePage\InfoData.vue
-->
<template>
  <div class="info-data">
    <!-- 线 -->
    <div class="line" v-if="showBase"></div>

    <div class="q-base" v-if="showBase">
      <div class="q-company" v-if="isCompany">
        <p class="c-name">{{ userDataExtra.orgname }}</p>
        <p class="c-gm" v-if="h_showDataCompany.length">{{ h_showDataCompany.join(' · ') }}</p>
        <p class="c-work-time" v-if="userDataExtra.worktime || userDataExtra.holiday">
          <img src="../../assets/images/time.png" alt="" />
          <span>{{ userDataExtra.worktime }}（{{ userDataExtra.holiday }}）</span>
        </p>
        <p class="welfare" v-if="userDataExtra.benefit">
          <span v-for="(item, index) in userDataExtra.benefit.split(',')" :key="index">
            {{ item }}
          </span>
        </p>
      </div>

      <!-- 这里是个人的 -->
      <div class="q-person" v-if="!isCompany">
        <p
          class="p-rz"
          v-if="userDataProfile.identification && userDataProfile.identification.identified"
        >认证：{{ userDataProfile.identification.profession }}</p>
        <p class="p-info" v-if="h_showDataPerson.length">{{ h_showDataPerson.join(' / ') }}</p>
      </div>
    </div>

    <!-- 线 -->
    <div class="line" v-if="showBase"></div>

    <div class="q-detail">
      <div class="c-business">
        <h2 v-if="userDataSkill.length">{{ isCompany ? '公司业务' : 'TA的技能' }}</h2>
        <div class="content" v-if="userDataSkill.length">
          <div class="container">
            <div
              class="business-item"
              v-for="(item, index) in userDataSkill"
              :key="index"
              v-app-jump="{ to: `mtjimu://skill?id=${item.id}` }"
            >
              <div class="business-title">
                <p class="name"># {{ item.skillCategory }}</p>
                <p class="price" v-if="item.showPrice !== '面议'">
                  <span>{{ item.showPrice.split('/')[0] }}</span>
                  <span class="unit">/{{ '' + item.showPrice.split('/')[1] }}</span>
                </p>
                <p class="price" v-else>
                  <span>{{ item.showPrice }}</span>
                </p>
              </div>
              <div class="business-desc">{{ item.title }}</div>
              <div class="business-detail">
                {{ item.remark }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-introduce c-similarly" v-if="userDataExtra.ability">
        <h2>{{ isCompany ? '公司介绍' : '职业能力' }}</h2>
        <div class="content">
          <div v-html="userDataExtra.ability"></div>
        </div>
      </div>

      <!-- 线 -->
      <!-- <div class="line" v-if="!isCompany && userDataExtra.experience"></div> -->

      <div class="c-experience c-similarly" v-if="userDataExtra.experience">
        <h2>项目经验</h2>
        <div class="content">
          <div v-html="userDataExtra.experience"></div>
        </div>
      </div>

      <!-- 线 -->
      <!-- <div class="line" v-if="!isCompany && userDataExtra.userEducations.length"></div> -->

      <div class="c-address c-similarly" v-if="isCompany && userDataExtra.address">
        <h2>公司地址</h2>
        <div class="content">{{ userDataExtra.address }}</div>
      </div>

      <!-- 这里是个人的 -->
      <div class="p-education" v-if="!isCompany && userDataExtra.userWorks.length">
        <h2>工作履历</h2>
        <div class="content">
          <div class="education-item" v-for="(item, index) in userDataExtra.userWorks" :key="index">
            <div class="name-time">
              <span class="name">{{ item.company }}</span>
              <span class="time">{{ item.period }}</span>
            </div>
            <div class="major">
              <span>{{ item.job }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 这里是个人的 -->
      <div class="p-education" v-if="!isCompany && userDataExtra.userEducations.length">
        <h2>教育经历</h2>
        <div class="content">
          <div
            class="education-item"
            v-for="(item, index) in userDataExtra.userEducations"
            :key="index"
          >
            <div class="name-time">
              <span class="name">{{ item.college }}</span>
              <span class="time">{{ item.period }}</span>
            </div>
            <div class="major">
              <span>{{ item.major }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 徽章 -->
      <div class="p-badge" v-if="userDataBadge.badges.length && !isCompany">
        <h2>个人徽章</h2>
        <div class="content">
          <div
            class="badge-item"
            v-for="item in userDataBadge.badges"
            v-app-jump="{
              to: toBagde,
            }"
            :key="item.id"
          >
            <img :src="item.activeIcon" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: [
      'userDataExtra',
      'userDataProfile',
      'userDataBase',
      'userDataSkill',
      'userDataBadge',
      'uuid',
    ],
    data() {
      return {
        // 需要展示的一些信息
        h_showDataPerson: [],
        h_showDataCompany: [],
        sexSL: {
          value_0: '未知',
          value_1: '男',
          value_2: '女',
        },
        // 是否隐藏公司或者个人的介绍
        showBase: false,
        // 去徽章墙
        toBagde: `mtjimu://webview?url=https://${
          process.env.NODE_ENV === 'development' ? 'dev-' : ''
        }jimu-h5.movtile.com/activity/badgewall.html?uuid=${this.uuid}`,
      };
    },
    computed: {
      // isPerson() {
      //   return (
      //     this.userDataProfile.identification &&
      //     this.userDataProfile.identification.identified === 1
      //   );
      // },
      // isCompany() {
      //   return (
      //     this.userDataProfile.identification &&
      //     this.userDataProfile.identification.identified === 2
      //   );
      // },
      isPerson() {
        return this.userDataBase.homepageStyle === 0;
      },
      isCompany() {
        return this.userDataBase.homepageStyle;
      },
    },
    created() {},
    mounted() {
      // 先滞空
      this.h_showDataPerson = [];
      this.h_showDataCompany = [];
      // 处理数据
      this.userDataProfile.age && this.h_showDataPerson.push(this.userDataProfile.age + '岁');
      this.userDataProfile.sex &&
        this.userDataProfile.sex !== 3 &&
        this.h_showDataPerson.push(this.sexSL['value_' + this.userDataProfile.sex]);
      this.userDataProfile.city && this.h_showDataPerson.push(this.userDataProfile.city);
      this.userDataProfile.profession &&
        this.h_showDataPerson.push(this.userDataProfile.profession);
      this.userDataBase.identifiedYear &&
        this.h_showDataPerson.push('从业' + this.userDataBase.identifiedYear + '年');
      // 处理数据
      this.userDataExtra.finance && this.h_showDataCompany.push(this.userDataExtra.finance);
      this.userDataExtra.scale && this.h_showDataCompany.push(this.userDataExtra.scale);
      this.userDataExtra.industry && this.h_showDataCompany.push(this.userDataExtra.industry);

      // 处理是否隐藏公司或者个人的介绍
      if (
        this.isPerson &&
        ((this.userDataProfile &&
          this.userDataProfile.identification &&
          this.userDataProfile.identification.identified) ||
          this.h_showDataPerson.length)
      ) {
        this.showBase = true;
      }

      if (
        this.isCompany &&
        (this.h_showDataCompany.length ||
          this.userDataExtra.worktime ||
          this.userDataExtra.holiday ||
          this.userDataExtra.benefit ||
          this.userDataExtra.orgname)
      ) {
        this.showBase = true;
      }
    },
    methods: {},
  };
</script>
<style lang="less" scoped>
  .info-data {
    text-align: left;
    .line {
      margin: 0rem 2rem;
      width: calc(100% - 40px);
      height: 1px;
      background: #f3f3f3;
    }

    .q-base {
      padding: 2rem 2rem;
      font-size: 1.4rem;
      .c-name {
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #111111;
      }
      .c-gm {
        margin-top: 1.3rem;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #111111;
        line-height: 8px;
      }
      .c-work-time {
        margin-top: 1.3rem;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #888888;
        line-height: 8px;
        img {
          width: 1.2rem;
          height: 1.2rem;
          margin-right: 5px;
          margin-top: 1px;
        }
      }
      .welfare {
        margin-top: 1.3rem;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        // overflow-x: auto;
        span {
          flex-shrink: 0;
          margin-right: 3px;
          margin-bottom: 3px;
          padding: 3px 7px;
          background: #f2f2f2;
          border-radius: 11px;
          font-size: 11px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #898989;
        }
        &::-webkit-scrollbar {
          display: none;
        }
      }

      // 个人
      .q-person {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #111111;
        p {
          margin: 10px 0px;
        }
      }
    }
    .q-detail {
      color: #111;
      font-size: 1.4rem;
      h2 {
        position: relative;
        margin: 2rem 0rem;
        padding: 0rem 2rem;
        font-size: 17px;
        font-weight: 800;
        &::after {
          content: '';
          position: absolute;
          top: 13px;
          left: 20px;
          width: 68px;
          height: 11px;
          background: #888888;
          opacity: 0.1;
        }
      }
      .content {
        padding: 0rem 2rem;
      }
      .c-business {
        h2 {
          margin: 2rem 0rem 0rem;
        }
        .content {
          overflow: auto;
          white-space: nowrap;
          padding: 2rem 2rem;
          display: flex;
          // 加这个就是为了解决在手机那里没有右边框的问题
          .container {
            display: flex;
            overflow: visible;
            box-sizing: border-box;
            padding-right: 8px;
          }
          .business-item {
            flex-shrink: 0;
            width: 275px;
            height: 143px;
            background: #ffffff;
            box-shadow: 0px 1px 16px 1px rgba(0, 0, 0, 0.05);
            border-radius: 3px;
            margin-right: 1.3rem;
            padding: 1.7rem;
            overflow: hidden;
            .business-title {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 800;
              color: #111111;
              display: flex;
              align-items: center;
              justify-content: space-between;
              overflow: hidden;
              .name {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .price {
                font-size: 16px;
                font-family: DIN;
                font-weight: bold;
                color: #2247ff;
                .unit {
                  font-size: 8px;
                  font-family: PingFang SC;
                  font-weight: 400;
                  line-height: 8px;
                }
              }
            }
            .business-desc {
              margin-top: 1.2rem;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 800;
              color: #111111;
            }
            .business-detail {
              position: relative;
              padding: 4px 12px;
              text-align: left;
              z-index: 10;
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #111111;
              line-height: 23px;
              height: 5.3rem;
              margin-top: 1.2rem;
              white-space: pre-wrap;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              &::before {
                z-index: -1;
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 2.4rem;
                height: 2rem;
                background: url(../../assets/images/mark-left.png) 0 0 / cover no-repeat;
              }
              &::after {
                z-index: -1;
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                width: 2.4rem;
                height: 2rem;
                background: url(../../assets/images/mark-right.png) 0 0 / cover no-repeat;
              }
            }
          }
          &::-webkit-scrollbar {
            display: none;
          }
        }
      }
      .c-similarly {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #111111;
        line-height: 24px;
      }

      .c-introduce {
        h2 {
          // 我也不知道为什么加了他,现在去掉好像好看些,2021-12-28
          // margin: 0rem 0rem 2rem;
        }
        padding-bottom: 2rem;
      }
      .c-experience {
        padding-bottom: 2rem;
      }
      .c-address {
        padding-bottom: 20px;
      }
      .p-education {
        .education-item {
          margin-top: 2.9rem;
          .name-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 15px;
            font-weight: 800;
            color: #111111;
            line-height: 24px;
            .name {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            .time {
              font-size: 15px;
              font-weight: 400;
              color: #888888;
              line-height: 27px;
              white-space: nowrap;
            }
          }
          .major {
            font-size: 15px;
            font-weight: 400;
            color: #111111;
            margin-top: 1rem;
            line-height: 24px;
          }
          &:last-child {
            padding-bottom: 20px;
          }
        }
      }

      .p-badge {
        margin-bottom: 10px;
        .content {
          display: flex;
          overflow: auto;
          &::-webkit-scrollbar {
            display: none;
          }
        }
        .badge-item {
          img {
            width: 79px;
            height: 79px;
            margin-right: 2.1rem;
          }
        }
      }
    }
  }
</style>
